<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.js"></script>
</head>
<style>
    /* input {
        width: 200px;
        height: 40px;
        font-size: 24px;
    }

    button {
        width: 150px;
        height: 40px;
    } */

    table {
        border: 1;
        width: 800px;
    }

    tr,
    th,
    td {
        border: 1px solid black;
        width: 100px;
        height: 40px;
    }

    td {
        text-align: center;
    }
</style>

<body>
    姓名：<input type="text" id="name"><br>
    年龄：<input type="text" id="age"><br>
    电话：<input type="text" id="phone"><br>
    邮箱：<input type="text" id="mailbox"><br>
    性别：<input type="text" id="gender"><br>
    民族：<input type="text" id="ethnicGroup"><br>
    <button id="tijiao">提交</button>
    <hr>
    <select name="" id="">
        <option value="">姓名：</option>
        <option value="">年龄：</option>
        <option value="">电话：</option>
        <option value="">邮箱：</option>
        <option value="">性别：</option>
        <option value="">民族：</option>
    </select>
    <input type="text" id="sac">
    <button id="search">搜索</button>
    <hr>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>性别</th>
                <th>民族</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
<script>
    $(function () {
        // 增加
        $("#tijiao").click(function () {
            var name = $('#name').val()
            var age = $('#age').val()
            var phone = $('#phone').val()
            var mailbox = $('#mailbox').val()
            var gender = $('#gender').val()
            var ethnicGroup = $('#ethnicGroup').val()
            var str = `<tr>
                            <td>${name}</td>
                            <td>${age}</td>
                            <td>${phone}</td>
                            <td>${mailbox}</td>
                            <td>${gender}</td>
                            <td>${ethnicGroup}</td>
                            <td><a href='#'>编辑</a>&emsp;|&emsp;<a href='#'>删除</a></td>
                        </tr>`
            $('tbody').append(str)
            console.log(str);
            new Array(str)
            // var lis = JOSN.parse(str)
            // localStorage.setItem('data',str)
            // 删除
            $('a:last').click(function () {
                $(this).parent().parent().remove()
            })

            // 查找
            $('#search').click(function(){
               var txt = $('#sac').val()
               if ($.trim(txt) != "") {
                   $('tbody tr:not("#theader")').hide().filter(":contains('" + txt + "')").show().css('background','red');
               } else {
                   $("tbody tr:not('#theader')").css('background','white').show
               }
            })
        })


    })

</script>

</html>